<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .form-group {
            position: relative;
            padding-top: 1.0rem;
            border-top: none;
            border-left: none;
            border-right: none;
        }
        
        label {
            position: absolute;
            top: 15px;
            left: 0px;
            font-size: var(--font-size-small);
            opacity: 1;
            transform: translateY(0);
            transition: all 0.2s ease-out;
            z-index: 100
        }
        
        input:placeholder-shown+label {
            opacity: 0;
            transform: translateY(1rem);
        }
        
        .enabled {
            border: none;
            padding: 2px 12px;
            font-size: 14px;
            line-height: 1.5;
            background-color: #fff;
            border-bottom: 1px solid #ccc;
            outline: none;
            box-shadow: 0px 1px 0px 0px #ccc
        }
        
        input[type="text"]:focus,
        input[type="password"]:focus {
            border-bottom: 1.5px solid #26a2ff;
            /* box-shadow:0px 1.5px 0px 0px #26a2ff */
        }
    </style>
    <script>
        var test = function() {
            var label = document.getElementById('testmy')
            label.style.opacity = '1'
            label.style.transform = 'translateY(-2px)'
        }
        var huiqu = function() {
            var label = document.getElementById('testmy')
            var input = document.getElementById('dynamic-label-input')
            if (input.value.length === 0) {
                label.style.opacity = '0'
                label.style.transform = 'translateY(0rem)'
            }
        }
    </script>
</head>

<body>
    <div style="height: 500px;width: 300px;">
        <!-- <div class="form-group">
        <input size="25" type="text" id="dynamic-label-input" placeholder="Enter some text">
        <label for="dynamic-label-input">some text</label>
      </div> -->
        <div class="form-group">
            <p>
                <input type="text" onblur="huiqu()" onfocus="test()" id="dynamic-label-input" class="enabled text-info" placeholder="账号" />
                <label id="testmy" for="dynamic-label-input">账号</label>
            </p>
            <p>
                <span>我是第二行</span>
                <input type="text" placeholder="Enter some text" class="enabled text-info" />
            </p>
            <p>
                <span>我是第三行<i class="icon icon-must"></i></span>
                <input type="text" class="enabled text-info" placeholder="Enter some text" />
            </p>
        </div>
    </div>
    <script src="node_modules/jquery/dist/jquery.js"></script>
</body>

</html>